<!--<template>-->
<!--  <BasicModal v-bind="$attrs" title="查看结果" @register="registerModal" :showCancelBtn="false">-->
<!--    <div style="padding: 10px;">-->
<!--      <p><strong>算法名：</strong>{{ resultData.algorithmName }}</p>-->
<!--      <p><strong>结果图片：</strong></p>-->
<!--      ><img :src="resultData.imageUrl" alt="结果图片" style="max-width: 100%; border: 1px solid #ccc;" /-->
<!--      <p style="margin-top: 10px;"><strong>结果描述：</strong>{{ resultData.description }}</p>-->
<!--    </div>-->
<!--  </BasicModal>-->
<!--</template>-->

<!--<script lang="ts" setup>-->
<!--import { ref } from 'vue';-->
<!--import { BasicModal, useModalInner } from '/@/components/Modal';-->

<!--const resultData = ref({-->
<!--  algorithmName: '一维层状介质交互反演',-->
<!--  imageUrl: '',-->
<!--  description: '',-->
<!--});-->

<!--const [registerModal, { setModalProps }] = useModalInner((data) => {-->
<!--  resultData.value = data;-->
<!--});-->
<!--</script>-->
<template>
  <BasicModal
    v-bind="$attrs"
    @register="registerModal"
    title="查看结果"
    :width="800"
    :footer="null"
  >
    <div class="result-modal">
      <!-- 左侧菜单 -->
      <a-menu
        mode="vertical"
        :selectedKeys="[selectedKey]"
        @click="handleMenuClick"
        class="left-menu"
      >
        <a-menu-item key="color">色阶显示</a-menu-item>
        <a-menu-item key="gray">灰度显示</a-menu-item>
        <a-menu-item key="contour">等值线显示</a-menu-item>
        <a-menu-item key="mixed">混合现实</a-menu-item>
      </a-menu>

      <!-- 右侧内容：图片展示 -->
      <div class="right-content">
        <img
          :src="imageMap[selectedKey]"
          style="width: 550px; height: auto;"
        />
      </div>
    </div>
  </BasicModal>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { BasicModal, useModalInner } from '/@/components/Modal'

// 注册弹窗
const [registerModal] = useModalInner()

// 当前选中的菜单 key
const selectedKey = ref('color')

// 菜单点击事件
function handleMenuClick({ key }) {
  selectedKey.value = key
}
import colorimg from '/@/assets/loginmini/icon/jeecg_ad_text2.png';
import grayimg from '/@/assets/loginmini/icon/jeecg_ad_text.png';
import contourimg from '/@/assets/images/5.png';
import mixedimg from '/@/assets/images/6.png';
// Base64 图片数据（示例，你可以替换成你自己的）
// const imageMap = {
//   color: '',
//   gray: '',
//   contour: '',
//   mixed: '',
// };
const imageMap = {
  color:colorimg,
  gray:grayimg,
  contour:contourimg,
  mixed:mixedimg,

}
</script>

<style scoped lang="less">
.result-modal {
  display: flex;
  min-height: 400px;

  .left-menu {
    width: 150px;
    border-right: 1px solid #f0f0f0;
  }

  .right-content {
    flex: 1;
    padding-left: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>
